<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旺盛的前端组件库</title>
</head>
<style>
    body{
        background: #1bc2e3;
        margin: 0;
    }
    .cheese{
        display: grid;
        height: 400px;
        margin: 200px auto;
        width: 400px;
    }
    .cheese::before{
        content: "";
        background: #f1c200;
        --g:radial-gradient(farthest-side,#000
        98%,#0000);
        -webkit-mask: var(--g) 49% -15%/80px 80px,
        var(--g) 82% -3%/40px 40px,
        var(--g) -12% 14%/80px 80px,
        var(--g) -6% 55%/40px 40px,
        var(--g) 24% 111%/80px 80px,
        var(--g) 72% 106%/40px 40px,
        var(--g) 113% 24%/80px 80px,
        var(--g) 107% 74%/40px 40px,
        var(--g) 30% 28%/60px 60px,
        var(--g) 63% 23%/30px 30px,
        var(--g) 80% 52%/80px 80px,
        var(--g) 20% 70%/60px 60px, 
        var(--g) 50% 50%/20px 20px,
        var(--g) 55% 80%/30px 30px,
        var(--g) 88% 85%/50px 50px,
        linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask-composite: exclude;
    -webkit-mask-repeat:no-repeat;
}
</style>
<body>
    <div class="cheese"></div>
</body>
</html>